<template>
	<view :class="props.prams === '3' ? 'bg orderNum':'orderNum'">
		<view class="bigsize">
			<slot name="title"></slot>
		</view>
		<view class="inNum">可使用数量 {{availableQuantity}}</view>
		<view class="order">
			<text>订单号：{{orderNum}}</text>
		</view>
	</view>
</template>

<script setup lang='ts'>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		prams: String
	})
	console.log(props.prams)
	// 订单编号
	const orderNum = ref('fg7222222')
	// 可用数量
	const availableQuantity = ref('1/32')
</script>

<style lang="scss" scoped>
	.orderNum {
		position: relative;
		height: 243px;
		padding: 24px 40px 54px 48px;
		background: #4E47FF;
		border-radius: 32px;
		box-sizing: border-box;

		&.bg {
			background: url('/static/images/Home/homeSom/orderPro.png');
			background-size: 100% 100%;
		}

		.bigsize {
			margin-top: 30px;
			font-size: 60px;
			font-family: AliHYAiHei, AliHYAiHei;
			font-weight: bold;
			color: #FFFFFF;
		}

		.inNum {
			margin-top: 30px;
			font-size: 32px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
		}

		.order {
			position: absolute;
			right: 40px;
			top: 30px;
			font-size: 24px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 33px;
		}
	}
</style>